<template>
  <div class="index-body">
    <a-tabs
      v-model:activeKey="comName"
      type="editable-card"
      hide-add
      :tab-bar-style="{ height: '35px', padding: '0 20px', 'background-color': '#f0f0f0', margin: 0 }"
      @edit="onEdit"
      @change="change"
    >
      <a-tab-pane v-for="item in Tabs" :key="item.ele.label">
        <template #tab>
          <div @contextmenu.prevent="oncontextmenu">
            {{ item.ele.label }}
          </div>
        </template>
      </a-tab-pane>
    </a-tabs>
    <div id="mytopmenu" style="width: 130px; border: 1px solid #f5f8f9; position: absolute; top: -500px; z-index: 2">
      <a-menu @click="handleClick">
        <a-menu-item key="1">
          <a href="javascript:;">关闭</a>
        </a-menu-item>
        <a-menu-item key="2">
          <a href="javascript:;">关闭其他</a>
        </a-menu-item>
        <a-menu-item key="3">
          <a href="javascript:;">关闭左侧</a>
        </a-menu-item>
        <a-menu-item key="4">
          <a href="javascript:;">关闭右侧</a>
        </a-menu-item>
        <a-menu-item key="5">
          <a href="javascript:;">关闭全部</a>
        </a-menu-item>
      </a-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, defineProps, defineEmits, reactive, toRefs, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useStoreMenu } from '@/pinia/menuList'
const StoreMenu = useStoreMenu()
const props = defineProps({
  tabs: { type: Array, default: () => [] },
  sameMenuActiv: { type: String, default: '' },
})
const { tabs: Tabs, sameMenuActiv } = toRefs(props)
const emit = defineEmits(['evt_select'])
const onEdit = (targetKey, action, key = '1') => {
  if (action !== 'add') {
    for (let i = Tabs.value.length - 1; i >= 0; i--) {
      let item = Tabs.value[i]

      switch (key) {
        case '1':
          //关闭当前标签
          if (item.ele.label === targetKey) {
            if (comName.value === targetKey) {
              comName.value = Tabs.value[0].ele.label
              emit('evt_select', { x: 0, y: 0 })
            }
            Tabs.value.splice(i, 1)
            return
          }
          break
        case '2':
          //关闭其他标签
          if (item.ele.label !== targetKey) {
            Tabs.value.splice(i, 1)
          }
          break
      }
    }
  }
}
const comName = ref('')
const change = (targetKey) => {
  let item = Tabs.value.filter((m) => m.ele.label === targetKey)[0]
  emit('evt_select', { x: item.x, y: item.y })
}
watch(sameMenuActiv, (newV, oldV) => {
  comName.value = newV
})

let ctmenu = -1
const oncontextmenu = (e) => {
  let menu = document.getElementById('mytopmenu')
  menu.style.left = e.clientX + 'px'
  menu.style.top = e.clientY + 'px'
  ctmenu = e.target.innerText
}
const handleClick = (e) => {
  console.log('click', e)
  onEdit(ctmenu, 'remove', e.key)
}
</script>

<style>
/*.ant-menu.ant-menu-inline-collapsed {*/
/*  width: 50px !important;*/
/*}*/
</style>
